<html lang="en"><head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">




    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>


    <title>No SVG, no image, CSS-only fluid slider with input[type=range]</title>

    <link rel="canonical" href="https://codepen.io/thebabydino/pen/qByGqOm">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Figtree", sans-serif;
        }

        body {
            display: grid;
            place-content: center;
            min-height: 100vh;
            background: #000;
        }

        .container {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 1em;
            width: 800px;
            height: 500px;
            transition: all 400ms;
        }

        .container:hover .box {
            filter: grayscale(100%) opacity(24%);
        }

        .box {
            position: relative;
            background: var(--img) center center;
            background-size: cover;
            transition: all 400ms;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .box:hover {
            filter: grayscale(0%) opacity(100%);
        }

        .container:has(.box-1:hover) {
            grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
        }

        .container:has(.box-2:hover) {
            grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
        }

        .container:has(.box-3:hover) {
            grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
        }

        .container:has(.box-4:hover) {
            grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
        }

        .container:has(.box-5:hover) {
            grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
        }

        .box:nth-child(odd) {
            transform: translateY(-16px);
        }

        .box:nth-child(even) {
            transform: translateY(16px);
        }

        .box::after {
            content: attr(data-text);
            position: absolute;
            bottom: 20px;
            background: #000;
            color: #fff;
            padding: 10px 10px 10px 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            transform: translateY(60px);
            opacity: 0;
            transition: all 400ms;
        }

        .box:hover::after {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 400ms;
        }

    </style>


</head>

<body translate="no" style="--list: none;">
<div class="container">
    <div class="box box-1" style="--img: url(https://i.postimg.cc/sgBkfbtx/img-1.jpg);" data-text="Renji"></div>
    <div class="box box-2" style="--img: url(https://i.postimg.cc/3RZ6bhDS/img-2.jpg);" data-text="Sora"></div>
    <div class="box box-3" style="--img: url(https://i.postimg.cc/DZhHg0m4/img-3.jpg
);" data-text="Kaito"></div>
    <div class="box box-4" style="--img: url(https://i.postimg.cc/KjqWx5ft/img-4.jpg);" data-text="Tsuki"></div>
    <div class="box box-5" style="--img: url(https://i.postimg.cc/nrcWyW4H/img-5.jpg);" data-text="Mitsui"></div>
</div>

</body></html>